/***
 * 依赖 picker.js
 */
(function($, window, document) {

	var panelBuffer = '<div class="picker picker-pop">\
		<div class="picker-header">\
			<button class="btn btn-small bg-warning btn-cancel">取消</button>\
			<button class="btn  btn-small bg-primary btn-ok">确定</button>\
			<div class="clearfix"></div>\
		</div>\
		<div class="picker-body">\
		</div>\
	</div>';

	var pickerBuffer = '<div class="picker-item">\
		<div class="picker-inner">\
			<div class="picker-rule picker-rule-ft"></div>\
			<ul class="picker-list">\
			</ul>\
			<div class="picker-rule picker-rule-bg"></div>\
		</div>\
	</div>';

	//定义弹出选择器类
	var PopPicker = $.PopPicker = function(options) {
		var self = this;
		self.options = options || {};
		self.options.buttons = self.options.buttons || ['取消', '确定'];
		self.panel = $.dom(panelBuffer)[0];
		document.body.appendChild(self.panel);
		self.ok = self.panel.querySelector('.btn-ok');
		self.cancel = self.panel.querySelector('.btn-cancel');
		self.body = self.panel.querySelector('.picker-body');
		self.mask = $.createMask();
		self.cancel.innerText = self.options.buttons[0];
		self.ok.innerText = self.options.buttons[1];
		self.cancel.addEventListener('tap', function(event) {
			self.hide();
		}, false);
		self.ok.addEventListener('tap', function(event) {
			if(self.callback) {
				var rs = self.callback(self.getSelectedItems());
				if(rs !== false) {
					self.hide();
				}
			}
		}, false);

		self.mask[0].addEventListener('tap', function() {
			self.hide();
		}, false);
		self.createPicker();
		//防止滚动穿透
		self.panel.addEventListener($.EVENT_START, function(event) {
			event.preventDefault();
		}, false);
		self.panel.addEventListener($.EVENT_MOVE, function(event) {
			event.preventDefault();
		}, false);
	};
	PopPicker.prototype.createPicker = function() {
		var self = this;
		var layer = self.options.layer || 1;
		var width = (100 / layer) + '%';
		self.pickers = [];
		for(var i = 1; i <= layer; i++) {
			var pickerElement = $.dom(pickerBuffer)[0];
			pickerElement.style.width = width;
			self.body.appendChild(pickerElement);
			var picker = $(pickerElement).picker();
			self.pickers.push(picker);
			pickerElement.addEventListener('change', function(event) {

				var nextPickerElement = this.nextSibling;

				if(nextPickerElement && nextPickerElement.picker) {

					var eventData = event.detail || {};
					var preItem = eventData.item || {};
					nextPickerElement.picker.setItems(preItem.children);
				}
			}, false);

		}
	};
	//填充数据
	PopPicker.prototype.setData = function(data) {
		var self = this;
		data = data || [];

		self.pickers[0].setItems(data);
	};
	//获取选中的项（数组）
	PopPicker.prototype.getSelectedItems = function() {
		var self = this;
		var items = [];
		for(var i in self.pickers) {
			var picker = self.pickers[i];
			items.push(picker.getSelectedItem() || {});
		}
		return items;
	};
	//显示
	PopPicker.prototype.show = function(callback) {
		var self = this;
		self.callback = callback;
		self.mask.show();
		document.body.classList.add('picker-active-for-page');
		self.panel.classList.add('active');

	};
	//隐藏
	PopPicker.prototype.hide = function() {
		var self = this;
		if(self.disposed) return;
		self.panel.classList.remove('active');
		self.mask.close();
		document.body.classList.remove('picker-active-for-page');

	};
	PopPicker.prototype.dispose = function() {
		var self = this;
		self.hide();
		setTimeout(function() {
			self.panel.parentNode.removeChild(self.panel);
			for(var name in self) {
				self[name] = null;
				delete self[name];
			};
			self.disposed = true;
		}, 300);
	}

})(mui, window, document);